<!-- 规则设置 -->
<script setup>
import {ref} from "vue";
import Strategy from "@/views/Futures/components/slider/Card1/components/strategy.vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {getRunStrategy} from "@/api/strategy";
import {getProductList} from "@/api/product";
import {formatAmount} from "@/utils/format";
import Product from "@/views/Futures/components/slider/Card1/components/product.vue";
import Monitor from "@/views/Futures/components/slider/Card1/components/monitor.vue";
import {useRouter} from "vue-router";

const router = useRouter()

const list = ref([])

// 策略弹出框
const StrategyDom = ref(null)

// 商品弹出框
const ProductDom = ref(null)

// 监测池
const MonitorDon = ref(null)

const loading = ref(false)

// 执行所有策略
const implement = () => {
 ElMessageBox.confirm('是否执行所有策略', '提示', {
  confirmButtonText: '确认',
  cancelButtonText: '取消'
 }).then(() => {
  loading.value = true
  Promise.try(() => {
   return getRunStrategy()
  }).then(res => {
   ElMessage.success('执行成功')
  }).catch(err => {})
  loading.value = false
 }).catch(() => {})
}

// 获取所有商品
const loadProduct = ref(false)
const getAllProduct = () => {
 loadProduct.value = true
 Promise.try(() => {
  return getProductList()
 }).then(res => {
  res.data.forEach(item => {
   item.latest_price = formatAmount(item.latest_price)
  })
  list.value = res.data
  console.log(list.value)
 })
 loadProduct.value = false
}
getAllProduct()

// 选中商品信息
const getProductData = (value) => {
 console.log(value)
}
</script>

<template>
 <div class="card" v-loading="loading">
  <div class="card_header flex">
   <h6 class="card_header_title">规则设置</h6>

   <div class="btns">
    <el-button type="primary" size="small" @click="router.push('/FutureHistory')">历史交易</el-button>
    <el-button type="primary" @click="StrategyDom.open()" size="small">策略池</el-button>
    <el-button type="primary" size="small" @click="implement">执行</el-button>
   </div>
  </div>

  <div class="card_main">
   <div class="card_main_tags flex">
    <el-button type="primary" @click="ProductDom.open()" size="small">所有商品代号</el-button>
    <el-button type="primary" @click="MonitorDon.open()" size="small">监测池</el-button>
   </div>

   <div class="table" v-loading="loadProduct">
    <el-table :border="false" :data="list" :height="200">
     <el-table-column prop="product_name" label="名称" show-overflow-tooltip />
     <el-table-column prop="latest_price" label="最新价格" show-overflow-tooltip />
     <el-table-column prop="increase_rate" label="日涨幅" show-overflow-tooltip>
      <template #default="{row}">
       <el-link type="success" v-if="+row.increase_rate > 0">{{ row.increase_rate }}%</el-link>
       <el-link type="info" v-if="+row.increase_rate === 0">{{ row.increase_rate }}%</el-link>
       <el-link type="danger" v-if="+row.increase_rate < 0">{{ row.increase_rate }}%</el-link>
      </template>
     </el-table-column>
    </el-table>
   </div>
  </div>

  <Strategy ref="StrategyDom" />

  <Product ref="ProductDom" @getProduct="getProductData" />

  <Monitor ref="MonitorDon" />
 </div>
</template>

<style scoped lang="scss">
.card {
 &_header {
  margin-bottom: 20px;
  justify-content: space-between;
 }

 &_main {
  &_tags {
   margin-bottom: 15px;
   .el-button {
    flex: 1;
    margin: 0;

    &:first-child {
     border-radius: 40px 0 0 40px;
    }
    &:last-child {
     border-radius: 0 40px 40px 0;
    }
   }
  }

  .el-table {
   background-color: transparent;
   border: none;

   ::v-deep {
    .el-table__inner-wrapper {
     &:before{
      display: none;
     }
    }
    .cell {
     @include Font((color: $colorA, size: 14px));
    }
    tr {
     background-color: transparent;
    }
    .el-table__cell {
     background-color: transparent;
     border-color: $card_border_color;
    }
   }
  }
 }
}

.btns {
 .el-button {
  border-radius: 50px;
 }
}
</style>